<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>laytpl</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <style>
        body {
            text-align: left;
        }

        .img-fix {
            background-size: cover;
            background-position: center;
            overflow: hidden;
            position: relative;
            padding-top: 100%;
        }

        .img-fix img {
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 1;
        }

        .view-tpl1 {

        }

        .view-tpl1 .recomend .title {
            padding: 0 35%;
        }

        .view-tpl1 .item-recomend {
            padding: 2.67vw 5.33vw 0;
        }

        .view-tpl1 .item-recomend ul {
            background-color: #ffe9ea;
            border-radius: 3.33vw;
            box-shadow: 0 0 8.5px 1px #0a459f;
            padding: 0 4vw;
        }

        .view-tpl1 .item-recomend {
            border-bottom: 1px solid #e31c29;
            color: #fff;
            position: relative;
            padding: 5.33vw 30.67vw 5.33vw 0;
            text-align: left;
        }

        .view-tpl1 .item-recomend a {
            color: #fff;
        }

        .view-tpl1 .item-recomend:last-child {
            border-bottom: 0;
        }

        .view-tpl1 .item-recomend h3 {
            color: #4D4848;
            font-size: 5.33vw;
            font-weight: bold;
            padding: 0 0 2.13vw 0;
        }

        .view-tpl1 .item-recomend p {
            margin: 0 0 1.33vw 0;
        }

        .view-tpl1 .item-recomend .publish-date {
            color: #4D4848;
            font-weight: bold;
        }

        .view-tpl1 .item-recomend .publish-date span {
            color: #810416;
        }

        .view-tpl1 .item-recomend .actor {
            font-size: 3.47vw;
        }

        .view-tpl1 .item-recomend .des {
            font-size: 3.2vw;
            max-height: 11em;
            overflow: hidden;
        }

        .view-tpl1 .item-recomend .flg {
            position: absolute;
            right: 0;
            top: 12.53vw;
            width: 100px;
        }

        /*===tpl2===*/
        .view-tpl2 .recomend .title {

        }

        .view-tpl2 .recomend-list {

        }

        .view-tpl2 .item-recomend {
            box-sizing: border-box;
            padding: 0 10px;
        }

        .view-tpl2 .item-recomend .container{
            border-radius: 3vw;
            background-color: #fff;
            margin-top: 10px;
            border: 0.5vw #fec295 solid;
            box-sizing: border-box;
            overflow: hidden;
        }

        /*.view-tpl2 .recomend-list.row2 .item-recomend {*/
        /*    border-radius: 3vw;*/
        /*    background-color: #fff;*/
        /*    margin-top: 10px;*/
        /*    border: 0.5vw #fec295 solid;*/
        /*    overflow: hidden;*/
        /*    width: calc((100vw - 30px) / 2);*/
        /*}*/

        .view-tpl2 .item-recomend a {
            color: #101010;
        }

        .view-tpl2 .item-recomend .plg {
            border-radius: 2vw 2vw 0 0;
            overflow: hidden;
        }

        .view-tpl2 .item-recomend h5 {
            font-weight: bold;
            height: 8.5vw;
            overflow: hidden;
            text-align: left;
            padding: 0 1.5vw;
            line-height: 4.5vw;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            margin-top: 1.5vw;
        }

        .view-tpl2 .item-recomend .price-wrapper {
            color: red;
            text-align: left;
            padding-left: 1vw;
            margin-top: 2vw;
        }

        .view-tpl2 .item-recomend .price-wrapper .price {
            font-size: 7vw;
        }

        .view-tpl2 .item-recomend .price-wrapper .orig-price {
            color: #ccc;
            font-size: 12px;
            padding-left: 1vw;
            text-decoration: line-through;
        }

        .view-tpl2 .item-recomend .tips-event {
            border: 1px red solid;
            border-radius: 2vw;
            color: red;
            font-weight: bold;
            text-align: center;
            width: 30vw;
            font-size: 3vw;
            margin: 2vw;
            margin-top: 1vw;
            line-height: 5vw;
        }
    </style>
    <script src="https://www.web000.cn/layer.min.js"></script>
    <script>
        function formatStr(str) {
            return str ? str : '';
        }
    </script>
</head>
<body>
<script type="text/html" id="tpl1">
    <div class="view-tpl1" style='{{ formatStr(d.style) }}'>
        <div class="banner" style='{{ formatStr(d.banner.style) }}'>
            {{# if(d.banner.title){ }}
            <p class="title"><img src="{{ d.banner.title }}" width="100%"></p>
            {{# }}}
            <div class="banner-list {{ 'row'+d.banner.row }}">
                {{# laytpl.each(d.banner.list, function(index, item){ }}
                {{# if(item.redirectUrl){ }}
                <p class="item-banner" style='{{ formatStr(item.style) }}'><a href="{{item.redirectUrl}}"><img src="{{ item.imgUrl }}" width="100%"/></a></p>
                {{# } else{ }}
                <p class="item-banner" style='{{ formatStr(item.style) }}'><img src="{{ item.imgUrl }}" width="100%"/></p>
                {{# } }}
                {{# }); }}
            </div>
        </div>
        <div class="recomend" style='{{ formatStr(d.recomend.style) }}'>
            {{# if(d.recomend.title){ }}
            <p class="title"><img src="{{ d.recomend.title }}" width="100%"></p>
            {{# }}}
            <div class="recomend-list {{ 'row'+d.recomend.row }} ">
                {{# laytpl.each(d.recomend.list, function(index, item){ }}
                <div class="item-recomend" style='{{ formatStr(item.style) }}'>
                    {{# if(item.redirectUrl){ }}
                    <a href="{{item.redirectUrl}}">
                        <h3>{{ item.FilmName }}</h3>
                        <p class="publish-date">上映时间：<span>{{ item.Publish_Date }}</span></p>
                        <p class="actor">{{ item.Publish_Date }}</p>
                        <p class="des">{{ item.Intro }}</p>
                        <span class="flg"><img src="{{ item.Post_Path }}" width="100%"></span>
                    </a>
                    {{# } else{ }}
                    <h3>{{ item.FilmName }}</h3>
                    <p class="publish-date">上映时间：<span>{{ item.Publish_Date }}</span></p>
                    <p class="actor">{{ item.Publish_Date }}</p>
                    <p class="des">{{ item.Intro }}</p>
                    <span class="flg"><img src="{{ item.Post_Path }}" width="100%"></span>
                    {{# } }}
                </div>
                {{# }); }}
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="tpl2">
    <div class="view-tpl2" style='{{ formatStr(d.style) }}'>
        <div class="banner" style='{{ formatStr(d.banner.style) }}'>
            {{# if(d.banner.title){ }}
            <p class="title"><img src="{{ d.banner.title }}" width="100%"></p>
            {{# }}}
            <div class="banner-list {{ 'row'+d.banner.row }}">
                {{# laytpl.each(d.banner.list, function(index, item){ }}
                {{# if(item.redirectUrl){ }}
                <p class="item-banner" style='{{ formatStr(item.style) }}'><a href="{{item.redirectUrl}}"><img src="{{ item.imgUrl }}" width="100%"/></a></p>
                {{# } else{ }}
                <p class="item-banner" style='{{ formatStr(item.style) }}'><img src="{{ item.imgUrl }}" width="100%"/></p>
                {{# } }}
                {{# }); }}
            </div>
        </div>
        <div class="recomend" style='{{ formatStr(d.recomend.style) }}'>
            {{# if(d.recomend.title){ }}
            <p class="title"><img src="{{ d.recomend.title }}" width="100%"></p>
            {{# }}}
            <div class="recomend-list pure-g {{ 'row'+d.recomend.row }} ">
                {{# laytpl.each(d.recomend.list, function(index, item){ }}
                <div class="item-recomend pure-u-1 pure-u-sm-1-2" style='{{ formatStr(item.style) }}'>
                    <div class="container">
                    {{# if(item.redirectUrl){ }}
                    <a href="{{item.redirectUrl}}">
                        <p class="plg img-fix"><img src="{{ item.ThumbnailUrl }}" width="100%"/></p>
                        <h5>{{ item.Name }}</h5>
                        <div class="price-wrapper"><span>￥<strong class="price DIN">{{ item.NormalPrice }}</strong></span><span class="orig-price DIN">原价￥{{ item.MarketPrice }}元</span></div>
                        <p class="tips-event">江西银行信用卡特惠</p>
                    </a>
                    {{# } else{ }}
                    <p class="plg img-fix"><img src="{{ item.ThumbnailUrl }}" width="100%"/></p>
                    <h5>{{ item.Name }}</h5>
                    <div class="price-wrapper"><span>￥<strong class="price DIN">{{ item.NormalPrice }}</strong></span><span class="orig-price DIN">原价￥{{ item.MarketPrice }}元</span></div>
                    <p class="tips-event">江西银行信用卡特惠</p>
                    {{# } }}
                    </div>
                </div>
                {{# }); }}
            </div>
        </div>
    </div>
</script>
<div class="page"></div>
<script type="text/javascript">
    var data = {
        "tplId": 'tpl2',
        "title": "One美生活圈“发”现美好吧",
        "style": "background-color: #ffe9da;",
        "banner": {
            "style": '',
            'row': 1,
            'title': '',
            'list': [
                {
                    "style": '',
                    "imgUrl": "https://resource.jxdyp.com/jxmskj/backuploads/images/banner//a3959c64-530d-40fa-b401-cfa6041918bc.jpg",
                    "redirectUrl": ''
                },
                {
                    "style": '',
                    "imgUrl": "https://resource.jxdyp.com/jxmskj/backuploads/images/banner//73c18a29-795b-4f04-aa01-8f6b9a959610.jpg",
                    "redirectUrl": ''
                },
                {
                    "style": '',
                    "imgUrl": "https://resource.jxdyp.com/jxmskj/backuploads/images/banner//7d15917f-6c59-4ec1-ab60-ccd873dd32f4.jpg",
                    "redirectUrl": ''
                },
                {
                    "style": '',
                    "imgUrl": "https://resource.jxdyp.com/jxmskj/backuploads/images/banner//5b8f26cd-4780-4306-95a9-981e3c3adecb.jpg",
                    "redirectUrl": ''
                },
            ]
        },
        "recomend": {
            "style": "",
            'title': 'https://mobile.jxmskjjt.com/backuploads/images/businessarea/20220907//bbb24eb8-cf6d-4a2a-ae85-40f23a22153e.jpg',
            'row': 2,
            "list": [
                {
                    "ID": 170,
                    "Name": "【7店通用•丽锦美容美发】14元抢购原价30元洗吹套餐  单人洗吹+造型一次",
                    "ThumbnailUrl": "//resource.jxdyp.com/jxmskj/backuploads/images/merchants/20230608//5fe3f640-0cb3-4989-afa7-d948d57a7f86.jpeg",
                    "SpecID": 245,
                    "MerchantsIDs": "958,959,961,962,963,964,960",
                    "NormalPrice": 14,
                    "MarketPrice": 30,
                    "MerchantsCategoryIDs": "288",
                    "MerchantsCategoryNames": "美容美发"
                },
                {
                    "ID": 179,
                    "Name": "【7店通用•纤诺护肤造型】14元抢购原价50元洗吹套餐 单人洗吹+造型一次",
                    "ThumbnailUrl": "https://resource.jxdyp.com/jxmskj/backuploads/images/good//ImgGoodList_e4aa08c3-8c44-4539-a84a-3fbe284fd4bf.png_240x240.jpg",
                    "SpecID": 262,
                    "MerchantsIDs": "969,981,982,983,984,985,986",
                    "NormalPrice": 14,
                    "MarketPrice": 50,
                    "MerchantsCategoryIDs": "288",
                    "MerchantsCategoryNames": "美容美发"
                },
                {
                    "ID": 186,
                    "Name": "【三店通用·Z-ONE】19元抢购原价98元洗剪吹套餐 单人洗剪吹+造型一次",
                    "ThumbnailUrl": "https://resource.jxdyp.com/jxmskj/backuploads/images/good//ImgGoodList_897ac121-16e3-4c8e-a3e7-8424eedd9d9b.png_240x240.jpg",
                    "SpecID": 269,
                    "MerchantsIDs": "1002,1003,1005",
                    "NormalPrice": 19,
                    "MarketPrice": 98,
                    "MerchantsCategoryIDs": "288",
                    "MerchantsCategoryNames": "美容美发"
                },
                {
                    "ID": 190,
                    "Name": "【玲珑之约卡洛斯·明珠广场店】28元抢购原价39元洗吹套餐 单人洗吹+造型一次",
                    "ThumbnailUrl": "https://resource.jxdyp.com/jxmskj/backuploads/images/good/20221123//ImgGoodList_7ef3de05-8886-4470-beb7-65adbca633cf.png_240x240.jpg",
                    "SpecID": 273,
                    "MerchantsIDs": "1001",
                    "NormalPrice": 28,
                    "MarketPrice": 39,
                    "MerchantsCategoryIDs": "288",
                    "MerchantsCategoryNames": "美容美发"
                },
            ]
        },
    }
    var getTpl = document.getElementById(data.tplId).innerHTML
        , view = document.querySelector('.page');
    laytpl(getTpl).render(data, function (html) {
        view.innerHTML = html;
    });
</script>
</body>
</html>
